<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jsp/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCEmpleado.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <ui:param name="nombreparam" value="empleado" />
    <ui:param name="duracionparam" value="7000" />
    <ui:param name="efectshowparam" value="fade" />
    <ui:param name="efecthideparam" value="fade" />

    <p:commandButton style="display:none" id="dummyBtn"/>
    <p:defaultCommand target="dummyBtn" />

    <p:wizard backLabel="Atrás" nextLabel="Siguiente" widgetVar="wiz" styleClass="wizarInterno">

        <p:tab title="Datos Personales">

            <h:panelGrid columns="3" id="paneldialogogriddata#{nombreparam}" styleClass="grid-modal-interno">

                <h:outputText value="(*)Nombre:"/>
                <h:column>
                    <p:inputText id="nombre#{nombreparam}" value="#{pCEmpleado.temporal.nombre}" required="true" 
                                 requiredMessage="El campo Nombre es obligatrio"/>
                </h:column>
                <p:message display="icon" for="nombre#{nombreparam}" />

                <h:outputText value="(*)Apellido:"/>
                <h:column>
                    <p:inputText id="apellido#{nombreparam}" value="#{pCEmpleado.temporal.apellido}" required="true" 
                                 requiredMessage="El campo Apellido es obligatrio"/>
                </h:column>
                <p:message display="icon" for="apellido#{nombreparam}" />

                <h:outputText value="(*)Documento:"/>
                <h:column>
                    <p:inputMask id="documento#{nombreparam}" value="#{pCEmpleado.documento}" required="true" mask="9.999.999-9"
                                 requiredMessage="El campo Documento es obligatrio"/>
                </h:column>
                <p:message display="icon" for="documento#{nombreparam}" />

                <h:outputText value="(*)Correo:"/>
                <h:column>
                    <p:inputText id="correo#{nombreparam}" value="#{pCEmpleado.temporal.email}" required="true" 
                                 requiredMessage="El campo Correo es obligatrio" validatorMessage="El campo Email no es v&#225;lido. Ejemplo: ejemplo@algo.com"> 
                        <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                    </p:inputText>
                </h:column>
                <p:message display="icon" for="correo#{nombreparam}" />

                <h:outputText value="Tel&#233;fono:"  styleClass="sinAster2"/>
                <h:column>
                    <p:inputMask id="telefono#{nombreparam}" value="#{pCEmpleado.temporal.telefono}" mask="99999999"/>  
                </h:column>
                <p:message display="icon" for="telefono#{nombreparam}" />

                <h:outputText value="Celular:"  styleClass="sinAster2"/>
                <h:column>
                    <p:inputMask id="celular#{nombreparam}" value="#{pCEmpleado.temporal.cel}" mask="099999999"/> 
                </h:column>
                <p:message display="icon" for="celular#{nombreparam}" />

                <h:outputText value="Fecha de Nacimiento:" styleClass="sinAster2"/>
                <h:column>
                    <p:calendar id="fechNac#{nombreparam}" size="10" value="#{pCEmpleado.fechaNac}" pattern="dd/MM/yyyy"
                                maxlength="10" label="Fecha Nacimiento" navigator="true" effect="explode" readonlyInput="true"
                                maxdate="#{pCReserva.fechaActual}" locale="es" showOn="button" />
                </h:column>
                <p:message display="icon" for="fechNac#{nombreparam}" />

            </h:panelGrid>

            <p:commandLink value="#{pCEmpleado.devolverTxtLimpiarFormDlg()}" update="paneldialogogriddata#{nombreparam}"
                           process="@this" rendered="#{!pCEmpleado.esVer()}">
                <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
            </p:commandLink>

        </p:tab><p:tab title="Datos de Direcci&#243;n">

            <h:panelGrid columns="3" id="paneldialogogriddata#{nombreparam}DD" styleClass="grid-modal">

                <h:outputText value="(*)Departamento:"/>
                <h:column>
                    <p:selectOneMenu  style="margin-left:3px"  id="departamento#{nombreparam}"  value="#{pCEmpleado.temporal.departamento}" required="true" 
                                      requiredMessage="Debe seleccionar un departamento">
                        <f:selectItem itemLabel="Seleccione..." itemValue=""/>
                        <f:selectItems value="#{departamentos.depatamentos}" />
                    </p:selectOneMenu>
                </h:column>
                <p:message display="icon" for="departamento#{nombreparam}" />

                <h:outputText value="(*)Ciudad:"/>
                <h:column>
                    <p:inputText id="ciudad#{nombreparam}" value="#{pCEmpleado.temporal.ciudad}" required="true"
                                 requiredMessage="El campo Ciudad es obligatrio"/>
                </h:column>
                <p:message display="icon" for="ciudad#{nombreparam}" />

                <h:outputText value="(*)Calle:"/>
                <h:column>
                    <p:inputText id="calle#{nombreparam}" value="#{pCEmpleado.temporal.calle}" required="true"
                                 requiredMessage="El campo Calle es obligatrio"/>
                </h:column>
                <p:message display="icon" for="calle#{nombreparam}" />

                <h:outputText value="(*)Nro. Puerta:"/>
                <h:column>
                    <p:inputText id="numero#{nombreparam}" value="#{pCEmpleado.temporal.numero}" required="true"
                                 requiredMessage="El campo Número es obligatrio" label="Nro. Puerta" maxlength="4" size="4">
                        <f:convertNumber integerOnly="true"/>
                    </p:inputText>
                </h:column>
                <p:message display="icon" for="numero#{nombreparam}" />

                <h:outputText value="Detalles:"/>
                <h:column>
                    <p:inputTextarea cols="42" rows="4" autoResize="false" maxlength="255" id="detalle#{nombreparam}" value="#{pCEmpleado.temporal.detalle}"/>
                </h:column>
                <p:message display="icon" for="detalle#{nombreparam}" />

            </h:panelGrid>

            <p:commandLink value="#{pCEmpleado.devolverTxtLimpiarFormDlg()}" update="paneldialogogriddata#{nombreparam}DD"
                           process="@this" rendered="#{!pCEmpleado.esVer()}">
                <p:resetInput target="paneldialogogriddata#{nombreparam}DD"/>
            </p:commandLink>

        </p:tab><p:tab title="Datos de Usuario">

            <h:panelGrid columns="3" id="paneldialogogriddata#{nombreparam}DU" styleClass="grid-modal">

                <h:outputText value="(*)Nombre de Usuario:"/>
                <h:column>
                    <p:inputText id="usuario#{nombreparam}" value="#{pCEmpleado.temporal.nombreUsuario}" required="true"
                                 requiredMessage="El campo Nombre de Usuario es obligatrio"/>
                </h:column>
                <p:message display="icon" for="usuario#{nombreparam}" />

                <c:if test="#{pCEmpleado.esEditar()}">
                    <h:outputText value="Contrase&#241;a:"/>
                    <h:column>

                        <p:password id="contrasenia#{nombreparam}" value="#{pCEmpleado.contrasenia}" feedback="true"
                                    promptLabel="Ingrese una contrase&#241;a" weakLabel="D&#233;bil"  
                                    goodLabel="Buena" strongLabel="Fuerte" match="contraseniaRe#{nombreparam}" 
                                    label="Contrase&#241;a" required="false"
                                    requiredMessage="El campo Contrase&#241;a es obligatrio"
                                    validatorMessage="No coincide la contrase&#241;a" />

                    </h:column>
                    <p:message display="icon" for="contrasenia#{nombreparam}" />

                    <h:outputText value="Confirmar Contrase&#241;a:"/>
                    <h:column>
                        <p:password id="contraseniaRe#{nombreparam}" value="#{pCEmpleado.contrasenia}"  
                                    label="Confirmar Contrase&#241;a" required="false"
                                    requiredMessage="El campo Confirmar Contrase&#241;a es obligatrio" />
                    </h:column>
                </c:if><c:if test="#{pCEmpleado.esCrear()}">
                    
                    <h:outputText value="(*)Contrase&#241;a:"/>
                    <h:column>
                        <p:password id="contrasenia#{nombreparam}" value="#{pCEmpleado.contrasenia}" feedback="true"
                                    promptLabel="Ingrese una contrase&#241;a" weakLabel="D&#233;bil"  
                                    goodLabel="Buena" strongLabel="Fuerte" match="contraseniaRe#{nombreparam}" 
                                    label="Contrase&#241;a" required="true"
                                    requiredMessage="El campo Contrase&#241;a es obligatrio"
                                    validatorMessage="No coincide la contrase&#241;a" />
                    </h:column>
                    <p:message display="icon" for="contrasenia#{nombreparam}" />

                    <h:outputText value="(*)Confirmar Contrase&#241;a:"/>
                    <h:column>
                        <p:password id="contraseniaRe#{nombreparam}" value="#{pCEmpleado.contrasenia}"  
                                    label="Confirmar Contrase&#241;a" required="true"
                                    requiredMessage="El campo Confirmar Contrase&#241;a es obligatrio" />
                    </h:column>
                </c:if>
                <p:message display="icon" for="contraseniaRe#{nombreparam}" />

                <h:outputText value="(*)Veh&#237;culo:" rendered="#{pCEmpleado.rol == 2}"/>
                <h:column rendered="#{pCEmpleado.rol == 2}">
                    <p:selectOneMenu  style="margin-left:3px" id="vehiculo#{nombreparam}" value="#{pCEmpleado.vehiculo}" required="true"
                                      requiredMessage="Debe seleccionar un Veh&#237;culo">
                        <f:selectItem itemLabel="Seleccione..." itemValue=""/>
                        <f:selectItems value="#{pCEmpleado.vehiculosSelect}" />
                    </p:selectOneMenu>
                </h:column>
                <p:message display="icon" for="vehiculo#{nombreparam}" rendered="#{pCEmpleado.rol == 2}"/>

                <h:outputText value="Puesto:" rendered="#{(pCEmpleado.rol != 3) and (pCEmpleado.rol != 6)}"/>
                <h:column rendered="#{(pCEmpleado.rol != 3) and (pCEmpleado.rol != 6)}">
                    <p:selectOneMenu  style="margin-left:3px" id="puestoTrabajo#{nombreparam}" value="#{pCEmpleado.temporal.puestoTrabajo}">
                        <f:selectItem itemLabel="Sin definir" itemValue=""/>
                        <f:selectItems value="#{puestosTrabajos.devolverPuestos(pCEmpleado.rol)}" />
                    </p:selectOneMenu>
                </h:column>
                <p:message display="icon" for="puestoTrabajo#{nombreparam}" rendered="#{(pCEmpleado.rol != 3) and (pCEmpleado.rol != 6)}"/>

            </h:panelGrid>

            <p:commandLink value="#{pCEmpleado.devolverTxtLimpiarFormDlg()}" update="paneldialogogriddata#{nombreparam}DU"
                           process="@this" rendered="#{!pCEmpleado.esVer()}">
                <p:resetInput target="paneldialogogriddata#{nombreparam}DU"/>
            </p:commandLink>

            <p:commandButton value="Guardar" actionListener="#{pCEmpleado.guardar(nombreparam)}"
                             style="float: right; margin-top: 6px; margin-left: 10px;" async="false"
                             update=":tabs:formTabla#{nombreparam}:tableModel#{nombreparam} growldata#{nombreparam} paneldialogogriddata#{nombreparam} :tabs:formrol#{nombreparam}"
                             id="btndata#{nombreparam}" widgetVar="wvbtndata#{nombreparam}" rendered="#{!pCEmpleado.esVer()}"
                             oncomplete="handle#{nombreparam}datarequest(xhr, status, args);"
                             styleClass="btn-aceptar">
                <p:resetInput target="paneldialogogriddata#{nombreparam} paneldialogogriddata#{nombreparam}DD paneldialogogriddata#{nombreparam}DU :tabs:formrol#{nombreparam}" />
            </p:commandButton>

        </p:tab>
    </p:wizard>

</ui:component>
